<template>
<!--    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">-->
<!--        <li v-for="i in count" class="infinite-list-item">{{ i }}</li>-->
<!--    </ul>-->
    <div class="BigBox" v-for="(line,index) in data.AllData" :key="index" >
<!--        style="line-height:50px;text-align: center;display:inline-block;font-size: 25px;"-->
<!--        <div style="height:50px;">-->
            <h3 style="text-align: center">{{ line.name }}</h3>

            <input type="button" class="bt" value="查看工序 >" @click="ShowProcess()"/>

<!--        </div>-->


        <div class="devices"  style="overflow:auto">
            <div class="Box" v-for="device in line.devices" @click="go(device)">
                <img :src="line.src" style="width:90%;height:80%;border-radius: 10px"/>
                {{ device.name }}
            </div>
        </div>
    </div>
    <h1></h1>
</template>

<script setup>
import{useStore} from 'vuex'
import{useRouter} from 'vue-router'
import {onMounted, reactive} from 'vue'

const router = new useRouter()
const store = new useStore()

const data = reactive({
    active: 0,
    AllData:[]
})

onMounted(()=>{
    console.log('Graphic AllDevice - mounted');
    // console.log(store.state.productionLine)
    data.AllData = store.state.productionLine
})
function go(device){
    // console.log(device)
    // console.log(device.deviceID,device.name)
    store.commit("setDeviceName",{DeviceID:device.deviceID,DeviceName:device.name})     //保存一下当前设备名称和设备ID
    store.commit("setDeviceData",device.data)                                                   //保存一下当前设备传感器数据

    //跳转到图形化展示界面
    router.push({name:'MiniCharts'})
}
function ShowProcess(){
    console.log('showProcess')

    router.push({name:'CheckProcess'})
}
</script>

<style scoped>
.BigBox{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    /*align-items: center;*/

    margin-bottom: 30px;
    border-top:#42b983 1px solid
}
.devices{
    width:100%;
    height:342px;

    border: #42b983 1px solid;

    display: flex;
    flex-wrap: wrap;

    flex-direction: row;
    justify-content: flex-start;
}
.Box{
    width:49%;
    height:150px;
    /*border: #666666 1px solid;*/

    margin-top: 20px;


    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.bt{

    width:100px;
    height:35px;
    /*background-color: rgb(153 216 188);*/
    border-radius:5px;

    border:white 1px solid;
    position: absolute;
    right: 5px;
    margin-top: 15px;
}
</style>